<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  size: number,
  width: number,
  gap: number,
  color: string,
  offsetX: number,
  offsetY: number,
  opacity: number
}>()

const styleVars = computed(() => ({
  '--size': `${props.size || 24}px`,
  '--width': `${props.width || 2}px`,
  '--gap': `${props.gap || 6}px`,
  '--color': props.color || '#FF0000FF',
  margin: '0', // `${props.offsetY || 0}px 0 0 ${props.offsetX || 0}px`,
  opacity: props.opacity + ''
}))
</script>

<template>
  <div class="cross" :style="styleVars">
    <div class="line v top"></div>
    <div class="line v bottom"></div>
    <div class="line h left"></div>
    <div class="line h right"></div>
  </div>
</template>

<style scoped lang="less">
.cross {
  width: 64px;
  height: 64px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .line {
    position: absolute;
    background-color: var(--color);
    &.v {
      width: var(--width);
      height: calc(var(--size) / 2 - var(--gap));
      &.top {
        margin-top: calc(-1 * var(--size) / 2);
      }
      &.bottom {
        margin-bottom: calc(-1 * var(--size) / 2);
      }
    }
    &.h {
      width: calc(var(--size) / 2 - var(--gap));
      height: var(--width);
      &.left {
        margin-left: calc(-1 * var(--size) / 2);
      }
      &.right {
        margin-right: calc(-1 * var(--size) / 2);
      }
    }
  }
}
</style>
